<template>
    <uni-list-item style="align-items: center" :title="title">
        <template v-slot:footer>
            <view class="flex-layout-row flex-center" v-if="data">
                <text style="color: #999; font-size: 12px">{{ name }}</text>
                <u-avatar class="gap-row-left" size="28px" :src="imageUrl"></u-avatar>
            </view>
            <view class="flex-layout-row flex-center" v-else>
                <text style="color: #999; font-size: 12px">{{ '--' }}</text>
            </view>
        </template>
    </uni-list-item>
</template>

<script>
export default {
    name: 'list-item-user',
    props: ['data', 'title'],
    computed: {
        imageUrl() {
            if (this.data) {
                return this.data.avatarUrl;
            } else {
                return '';
            }
        },
        name() {
            if (this.data) {
                return this.data.name;
            } else {
                return '';
            }
        }
    },
    data() {
        return {};
    }
};
</script>

<style></style>
